<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="50%"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" label-width="100px" :rules="rules">

      <el-form-item label="宠物名称" prop="name">
        <el-input v-model="form.name" style="width: 400px"></el-input>
      </el-form-item>

      <el-form-item label="宠物价格" prop="price">
        <el-input v-model="form.price" style="width: 100px"></el-input>
      </el-form-item>

      <el-form-item label="宠物描述" prop="description">
        <el-input
          v-model="form.description"
          :rows="4"
          type="textarea"
        />
      </el-form-item>

      <el-form-item label="宠物介绍" >
<!--        <el-input
          v-model="form.petIntroImgs"
          :rows="4"
          type="textarea"
        />-->

      </el-form-item>

      <QuillEditor
        v-model:content="form.petIntroImgs"
        contentType="html"
        toolbar="full"
        theme="snow"
        style="height:200px"
      />

      <br/>
      <br/>
      <el-form-item label="宠物参数" >
<!--        <el-input
          v-model="form.petParaImgs"
          :rows="4"
          type="textarea"
        />-->
      </el-form-item>

      <QuillEditor
        v-model:content="form.petParaImgs"
        contentType="html"
        toolbar="full"
        theme="snow"
        style="height:200px"
      />


    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm"
        >确认</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineEmits,ref ,defineProps,watch} from 'vue'
import axios from "@/util/axios";
import { ElMessage } from "element-plus";



const props=defineProps({
  dialogTitle:{
    type:String,
    default:'',
    required:true
  },
  dialogValue:{
    type:Object,
    default:()=>{}
  }
})

const bigTypeId=ref("")

const form=ref({
  id:-1,
  name:'',
  price:0,
  stock:0,
  type:{
    id:''
  },
  remark:'',
  petIntroImgs:'',
  petParaImgs:''
})



const emits=defineEmits(['update:modelValue','initPetList'])

const formRef=ref(null)


const handleClose = () => {
  formRef.value.resetFields();
  emits('update:modelValue',false)
}



const rules=ref({
  name:[
    {
      required: true,
      message: '请输入宠物名称！',
    }
  ],
  price:[
    { required: true, message: '请输入宠物价格!' },
    { type: 'number', message: '宠物价格是数值类型！',transform: (value) => Number(value) },
  ],
  description:[
    {
      required: true,
      message: '请输入宠物描述！',
    },
  ],
  petIntroImgs:[
    {
      required: true,
      message: '请输入宠物介绍！',
    }
  ],
  petParaImgs:[
    {
      required: true,
      message: '请输入宠物参数！',
    }
  ]
})

const bigTypeSlectOptions =ref([])

const smallTypeSlectOptions =ref([])


const handleConfirm = () => {

  formRef.value.validate(async (valid) => {
    if (valid) {
      console.log("xxx")
       try{
        let result=await axios.post("admin/pet/save",form.value);
        let data=result.data;
        if(data.code==0){
          ElMessage.success("执行成功");
          formRef.value.resetFields();
          bigTypeId.value=""
          emits("initPetList")
          handleClose();
        }else{
          ElMessage.error(data.msg);
        }
      }catch(err){
        console.log("error:"+err)
        ElMessage.error('系统运行出错，请联系管理员');
      }
    } else {
      return false
    }
  })
}



watch(
  ()=>props.dialogValue,
  ()=>{
    console.log("dialogValue222="+props.dialogValue);
    form.value=props.dialogValue;
    console.log(form.value.id)
    console.log(form.value.petParaImgs)
    if(form.value.id==undefined){
      console.log("是添加")
    }else{
      console.log("是修改")
      //bigTypeId.value=2;
      getBigTypeIdBySmallTypeId(form.value.type.id);
    }
  },
  {deep:true,immediate:true}
)

</script>

<style scoped>

</style>